<template>
  <div class="lock-mask">
    <div v-if="rights === RIGHTS_TYPE.REGISTER" class="rights gap-col-8">
      <Icon size="84" name="rightsRegister"></Icon>
      <span class="font-size-14 font-weight-400 line-height-140 text-center">{{ $t('message.loginBeforeUse') }}</span>
    </div>
    <div v-else-if="rights === RIGHTS_TYPE.SUBSCRIBE" class="rights gap-col-8">
      <Icon size="84" name="rightsSubscribe"></Icon>
      <span class="font-size-14 font-weight-400 line-height-140 text-center">{{
        $t('message.subscribeBeforeUse')
      }}</span>
    </div>
    <div v-else-if="isBlock">
      <Icon size="84" name="block"></Icon>
    </div>
    <div v-else-if="isSubscribe" class="section-wrap">
      <div class="sub-icon">
        <Icon size="84" name="lock2"></Icon>
      </div>
      <div class="preview-desc font-size-14 font-weight-500 line-height-140 text-center">
        {{ $t('message.previewSub') }}
      </div>
    </div>
    <div v-else-if="isBuy" class="section-wrap">
      <div class="buy-btn-wrap">
        <Icon class="star lt" size="24" name="start"></Icon>
        <Icon class="star rb" size="24" name="start"></Icon>
        <img class="logo" src="@/assets/images/price-logo.png" alt="logo" />
        <div class="buy-btn font-size-22 font-weight-500 line-height-140">${{ buyPrice.toFixed(2) }}</div>
      </div>
      <div class="preview-desc font-size-14 font-weight-500 line-height-140 text-center">
        {{ $t('message.previewBuy') }}
      </div>
    </div>
    <div v-if="preview" class="preview-desc font-size-14 font-weight-500 line-height-140 text-center">
      {{ isSubscribe ? $t('message.previewSub') : $t('message.previewBuy') }}
    </div>
    <div v-if="preview" class="preview-btns gap-row-8">
      <button class="replay font-size-12 font-weight-500 line-height-140 pointer" @click="$emit('click:replay')">
        {{ $t('message.replayPreview') }}
      </button>
      <button
        class="primary-btn primary-gradient font-size-12 font-weight-500 line-height-140 pointer"
        @click="onPayClick"
      >
        {{ isSubscribe ? $t('message.goToSub') : $t('message.goToBuy') }}
      </button>
    </div>
    <Icon v-if="showLock" class="show-lock" name="lock" size="84" @click.stop="() => emits('click:lock')"></Icon>
  </div>
</template>

<script setup>
import { RIGHTS_TYPE } from '@/constant'

const props = defineProps({
  rights: { type: Number },
  isBlock: { type: Boolean },
  isSubscribe: { type: Boolean },
  isBuy: { type: Boolean },
  buyPrice: { type: Number },
  preview: { type: Boolean, default: false },
  showLock: { type: Boolean, default: false },
})

const emits = defineEmits(['click:replay', 'click:subscribe', 'click:buy', 'click:lock'])

function onPayClick() {
  if (props.preview) {
    if (props.isSubscribe) {
      emits('click:subscribe')
    }
    if (props.isBuy) {
      emits('click:buy')
    }
  }
}
</script>

<style lang="scss" scoped>
.lock-mask {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(249, 94, 14, 0.2) 0%, rgba(231, 23, 179, 0.2) 100%);
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .rights {
    display: flex;
    flex-direction: column;
    align-items: center;

    span {
      padding: 0 5.125rem;
    }
  }

  .sub-icon {
    margin-bottom: 0.5rem;
  }

  .section-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .buy-btn-wrap {
    max-width: 8.75rem;
    margin-bottom: 1.25rem;
    position: relative;

    .star {
      position: absolute;
      &.lt {
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
      }
      &.rb {
        right: 0;
        bottom: 0;
        transform: translate(50%, 50%);
      }
    }

    .logo {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -60%);
    }

    .buy-btn {
      padding: 0.75rem 2rem 0.5rem;
      border-radius: 0.125rem 1.25rem;
      border: 0.03125rem solid rgba(255, 255, 255, 0.7);
      background: rgba(255, 255, 255, 0.21);
      box-shadow: 0rem 0rem 0.4375rem 0rem rgba(255, 15, 0, 0.68);
      text-shadow: 0rem 0rem 0.4375rem rgba(255, 15, 0, 0.68);
    }
  }

  .preview-desc {
    width: 14rem;
  }

  .preview-btns {
    margin-top: 1rem;
    display: flex;

    .replay {
      padding: 0 1rem;
      border: 0.0625rem solid #fff;
      border-radius: 2rem;
    }
  }

  .show-lock {
    cursor: pointer;
    z-index: 30;
  }
}
</style>
